<template>
    <Card>
      <Row style="margin-top: 30px">
        <Col>
          <Input style="width: 100%;text-align: center" placeholder="关键词搜索" v-model="input"></Input>
        </Col>
      </Row>
      <Row style="margin-top: 50px">
        <Col  v-clipboard="clipOptions(item)" span="3" v-for="(item,key) in iconList" :key="key" style="text-align: center;margin-top: 20px;height: 100px;cursor: pointer">
          <Icon size="32" :type="item"></Icon>
          <p style="font-size: 14px;margin-top: 20px">{{item}}</p>
        </Col>
      </Row>
    </Card>
</template>

<script>
import data from './data'

export default {
  name: 'icon-list',
  data () {
    return {
      input: ''
    }
  },
  computed: {
    iconList () {
      if (this.input === '') {
        return data
      } else {
        return data.filter(item => {
          return item.indexOf(this.input) !== -1
        })
      }
    }
  },
  methods: {
    clipOptions (value) {
      return {
        value: value,
        success: (e) => {
          this.$Message.success('复制成功')
        },
        error: () => {
          this.$Message.error('复制失败')
        }
      }
    }
  }
}
</script>

<style scoped>
  /deep/ .ivu-input:focus {
    outline: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    background: #eeeeee;
  }
  /deep/ .ivu-input {
    text-align: center;
    border-radius: 0px;
    background: #eeeeee;
    border: none;
    width: 500px;
  }
</style>
